<template>
	<view class="special-title">
		<h2>你喜欢的合集都在这里...</h2>
		<view class="title">
			<view class="title-box" v-for="item in results" :key="item.order" @click="toTitle(item.objectId,item.image,item.title)">
				<view class="title-img">

					<image :src="item.image" @click="getObjectId(item.objectId)" />

					<view class="title-text">
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import title from "./title.json";
	export default {
		data() {
			return {
				results: title.results,
				specialId: 0,
			}
		},

		methods: {
			getObjectId(id) {
				this.specialId = id
				return this.specialId
			},
			toTitle(id,img,title) {
				uni.navigateTo({
					url: `/pages/specialTitle/specialTitle?id=${id}&image=${img}&title=${title}`
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.special-title {

		h2 {
			color: #3ead3eba;
			font-size: 15px;
			font-weight: 700;
			text-align: left;
			margin-left: 20px;
			padding-top: 15px;
		}

		.title {
			display: flex;
			flex-wrap: wrap;
			width: 95vw;
			margin: 0 auto;

			.title-box {
				margin: 15px 10px;

				.title-img {
					width: 41vw;
					height: 230px;
					overflow: hidden;
					border-radius: 15px;
					position: relative;

					image {
						position: absolute;
						left: -100px;
						height: 240px;
					}


					.title-text {
						position: absolute;
						bottom: 15px;
						width: 100%;
						height: 30%;
						background-color: #e3dcdc99;

						text {
							display: inline-block;
							color: #fff;
							font-size: 1rem;
							line-height: 28px;
							margin: 10px 15px;
							text-align: left;
							width: 80%;
						}

					}
				}
			}
		}


	}
</style>
